<template>
  <div class="el-box">
    <CourseSection />
    <div class="el-data-box">
      <template v-if="courseDatas">
        <div class="el-data el-course-box">
          <div v-for="item in courseDatas" class="el-data-list el-fl">
            <div class="grid-content" @click="clickTo(item)">
              <div class="el-data-cover">
                <img v-if="item.courseCoverPath" :src="get_img_src(item.courseCoverPath)" fit="cover">
                <img v-else src="@/assets/image/goods_default.png" fit="cover">
              </div>
              <div class="el-data-title">
                <span class="el-title el-fl">{{ item.courseName }}</span>
              </div>
              <div class="el-data-item">
                <el-row>
                  <el-col :span="12">年级：{{ item.courseGradeName }}</el-col>
                  <el-col :span="12">学科：{{ item.courseSubjectName }}</el-col>
                  <el-col :span="12">版本：{{ item.courseVersionName }}</el-col>
                  <el-col :span="12">册别：{{ item.courseVolumeName }}</el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div style="clear: both;" />
        </div>
        <div class="el-page">
          <el-pagination
            :layout="listPages.layout"
            :total="listPages.total"
            :page-size="listPages.size"
            :current-page.sync="listPages.page"
            :page-sizes="listPages.sizes"
            :prev-text="listPages.prevtext"
            :next-text="listPages.nexttext"
            :page-count="listPages.count"
            :pageer-count="listPages.counter"
            :hide-on-single-page="listPages.single"
            @size-change="page_size_change"
            @current-change="page_current_change"
            @prev-click="page_prev_click"
            @next-click="page_next_click"
          />
        </div>
      </template>
      <template v-else>
        <div class="el-data-empty">数据加载中...</div>
      </template>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
